<template>
  <view class="container">
    <view class="box">
      <view class="header_txt">
        <view class="back"
              @click="backHandler">
          <image src="/static/img/back3.png"></image>
        </view>
        <view class="title"> 简历模板 </view>
      </view>
      <!-- 排序区域 -->
      <view class="solt_bar">
        <view class="item"
              @click="toggle('hangye')">
          <view class="top_title">行业分类</view>
          <image class="top_image"
                 v-if="!hangye"
                 src="../../static/image/kqfx_ico_xl@2x.png"></image>
          <image class="top_image"
                 v-if="hangye"
                 src="../../static/image/kqfx_ico_sl@2x.png"></image>
        </view>

        <view class="item"
              @click="toggle('timeshow')">
          <view class="top_title">发布时间</view>
          <image class="top_image"
                 v-if="!timeshow"
                 src="../../static/image/kqfx_ico_xl@2x.png"></image>
          <image class="top_image"
                 v-if="timeshow"
                 src="../../static/image/kqfx_ico_sl@2x.png"></image>
        </view>
      </view>

      <!-- 不限 -->
      <view class="t">
        <!-- 发布时间 -->
        <view class='mask'
              v-show="hangye">
          <view class="model">
            <view class="time_center">
              <view class="right_box">
                <view class="flexs2"
                      v-for="item in resumeCateList"
                      :key="item.id">
                  <view class="right_list"
                        :class="{time_font:item.id==pid}"
                        @click="toggleTime(item.id)">{{item.name}}</view>
                  <!-- <view class="right_chexs">
                    <image src="../../static/image/ico_xz@2x.png"
                           mode=""></image>
                  </view> -->
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- <SortModel v-show="hangye"
                   @selectChange="toggleTime"
                   :dataList="resumeCateList"></SortModel> -->

      </view>

      <!-- 不限 -->
      <view class="t">
        <SortModel v-show="timeshow"
                   @selectChange="togglePrice"
                   :dataList="newSortList"></SortModel>

      </view>

      <view class="kong_border"></view>
      <view class="center">
        <navigator :url="`/pages/offer/jianlicenter?id=${item.id}`"
                   class="center_list flexs2"
                   v-for="item in resumeList"
                   :key="item.id">
          <image class="center_image"
                 :src="$serverIp+item.head_image"
                 mode=""></image>
          <view class="center_right"
                style="border-bottom-width: 0rpx">
            <view class="zhichang_time">{{item.title}}</view>
            <view class="">
              <view class="center_study">上传者：{{item.author}}</view>
              <view class="flexs2">
                <view class="center_pay">已下载{{item.down_num}}次</view>
                <view class="cemter_last">
                  <image src="../../static/image/fxzl_ico_xz@2x.png"
                         mode=""></image>
                </view>
              </view>
            </view>
          </view>
        </navigator>
      </view>

      <!-- 状态空 -->
      <view class="kong_mt text-center"
            v-if="resumeList==0">
        <image class="image_last"
               src="../../static/image/offerxq_img_k@2x.png"
               mode=""></image>
        <view class="last_text">暂无信息</view>
      </view>

      <!-- 行业分类 -->
      <!-- <view class="model">
      <view class="time_center">
        <view class="right_box">
          <view class="flexs2">
            <view class="right_list time_font">{{98}}</view>
            <view class="right_chexs">
              <image src="../../static/image/ico_xz@2x.png"
                     mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view> -->
    </view>
  </view>

</template>

<script>
import SortModel from '../../components/sortModel.vue'
import { newSortList } from './data'
export default {
  components: { SortModel },
  data() {
    return {
      newSortList,
      timeshow: false,
      hangye: false,
      queryParams: { page: 1, limit: 10, cate_id: '', sort: 1 },
      resumeCateList: [],
      resumeList: [],
      pid: 4
    }
  },
  onLoad() {
    this.getResumeCateList()
    this.getResumeList()
  },
  methods: {
    //Resume/index
    async getResumeList() {
      const { data } = await this.$http.post('/Resume/index', this.queryParams)
      console.log(data)
      this.resumeList = data.data
    },
    toggleTime(id) {
      this.pid = id
      // console.log(id)
      this.queryParams.cate_id = id
      setTimeout(() => (this.hangye = false), 100)
      this.getResumeList()
    },
    togglePrice(item) {
      console.log(item)
      this.queryParams.sort = item.sort
      setTimeout(() => (this.timeshow = false), 100)
      this.getResumeList()
    },
    //resume/cate
    async getResumeCateList() {
      const { data } = await this.$http.post('/resume/cate')
      console.log(data)
      this.resumeCateList = data.data
    },
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    },
    toggle(name) {
      this[name != 'timeshow' ? 'timeshow' : ''] = false
      this[name != 'hangye' ? 'hangye' : ''] = false
      this[name] = !this[name]
    }
  }
}
</script>

<style lang="scss">
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  /* // .right {
  //   position: absolute;
  //   top: 14rpx;
  //   right: 14rpx;
  //   width: 60rpx;
  //   height: 60rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // } */

  .title {
    width: 750rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
/* 排序区域 */
.solt_bar {
  background-color: #fff;
  width: 750rpx;
  height: 70rpx;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;

    .top_image {
      width: 16rpx;
      height: 10rpx;
      margin-left: 6rpx;
    }
  }
}

.center_list {
  border-bottom: 2rpx solid #eee;
}

.zhichang_time {
  font-size: 29rpx;
}

.flexs2 {
  display: flex;
  justify-content: space-between;
}
.top_next {
  width: 100%;
  line-height: 70rpx;
  font-size: 26rpx;
  background-color: #ffffff;
}

.top_title {
  margin-right: 8rpx;
  font-size: 26rpx;
}

.right_box {
  width: 100%;
  line-height: 100rpx;
  padding: 0 30rpx;
}

.top_kong {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}

.image_last {
  width: 163rpx;
  height: 177rpx;
  margin-bottom: 16rpx;
}

.last_text {
  color: #666666;
  font-size: 26rpx;
}

.top_image {
  width: 16rpx;
  height: 10rpx;
}

.kong_border {
  width: 100%;
  height: 20rpx;
}
.right_chexs image {
  width: 26rpx;
  height: 18rpx;
}
/* cemter */
.center {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 0 30rpx;
}

.center_pay {
  font-size: 22rpx;
  color: #999999;
}

.cemter_last image {
  width: 26rpx;
  height: 26rpx;
}

.center_study {
  margin: 6rpx 0;
  font-size: 24rpx;
}

.center_right {
  width: 475rpx;
  height: auto;
  border-bottom: solid 1rpx #e5e5e5;
  padding: 20rpx 0;
}
.top_titles {
  width: 400rpx;
  height: 40rpx;
  color: #333333;
  font-size: 28rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  /* -webkit-box-orient: vertical; */
  /* word-break: break-all; */
}

.center_image {
  width: 196rpx;
  height: 130rpx;
  border-radius: 10rpx;
}

.center_maozi {
  width: 28rpx;
  height: 26rpx;
  margin-right: 6rpx;
}

.fwt {
  font-size: 24rpx;
}

.kong_mt {
  margin-top: 120rpx;
  text-align: center;
}

.image_last {
  width: 163rpx;
  height: 177rpx;
  margin-bottom: 16rpx;
}

.last_text {
  color: #666666;
  font-size: 26rpx;
}

.top_title {
  margin-right: 8rpx;
  font-size: 26rpx;
}
.right_list {
  width: 750rpx;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* shijian */
.time_font {
  // font-weight: bold;
  font-weight: bold;
  &::after {
    content: '';
    width: 26rpx;
    height: 18rpx;
    background: url('/static/img/钩选.png') no-repeat 0 0 / 100% 100%;
  }
}

.time_center {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  font-size: 28rpx;
}

/* model 行业分类 */
.model {
  width: 100%;
  height: auto;
  color: #333333;
  font-size: 28rpx;
  position: absolute;
  top: -20rpx;
}
.mask {
  z-index: 9999;
  position: fixed;
  top: 200rpx;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

// .active {
//   font-weight: bold;
//   &::after {
//     content: '';
//     width: 26rpx;
//     height: 18rpx;
//     background: url('/static/img/钩选.png') no-repeat 0 0 / 100% 100%;
//   }
// }
</style>
